<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能日志字段提取工具</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">
        <div class="logo-icon">📊</div>
        <div class="app-title">智能日志字段提取工具</div>
      </div>
      <button id="manageFieldsBtn" class="action-btn">管理字段</button>
    </div>
    
    <div class="content-area">
      <div class="input-section">
        <label>原始日志内容：</label>
        <textarea id="logInput" class="text-area" placeholder="粘贴日志内容..."></textarea>
      </div>
      
      <div class="options-section">
        <label>
          <input type="checkbox" id="showEmptyFields"> 显示空字段
        </label>
        <label>
          <input type="checkbox" id="highlightImportant" checked> 高亮重要字段
        </label>
      </div>
      
      <div class="result-section">
        <div class="result-header">
          <h3>提取结果</h3>
          <div id="statsInfo">0 个字段已提取</div>
        </div>
        <div id="resultsContainer">
          <div class="empty-result">输入日志内容后点击"提取字段"按钮</div>
        </div>
      </div>
    </div>
    
    <div class="footer-actions">
      <button id="parseBtn" class="primary-btn">提取字段</button>
      <button id="copyBtn" class="secondary-btn">复制结果</button>
    </div>
  </div>
  
  <div id="notification" class="notification">操作成功！</div>
  
  <div id="fieldManagerModal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3>字段管理</h3>
        <button class="modal-close">&times;</button>
      </div>
      <div class="modal-body">
        <div>
          <h4>内置字段</h4>
          <div id="defaultFieldsList" class="field-list"></div>
        </div>
        <div>
          <h4>自定义字段</h4>
          <div id="customFieldsList" class="field-list"></div>
          <button id="addFieldBtn" class="modal-btn">添加新字段</button>
        </div>
      </div>
      <div class="modal-footer">
        <button id="closeManagerBtn" class="modal-btn">关闭</button>
      </div>
    </div>
  </div>
  
  <script type="module" src="popup.js"></script>
</body>
</html>